<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">

            <a-form-item label="角色名称">
              <a-input v-model="searchParams.name"></a-input>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
            </a-form-item>

            <a-form-item v-if="isAuth('sys:role:save')">
              <a-button type="primary" icon="plus" @click="addOrUpdateHandle()">新增</a-button>
            </a-form-item>

            <!--<a-form-item v-if="isAuth('sys:role:delete')">-->
              <!--<a-button type="primary" icon="delete" :disabled="selectedRowKeys.length === 0" @click="handleCreate">-->
                <!--批量删除-->
              <!--</a-button>-->
            <!--</a-form-item>-->

          </a-form>
        </a-card>
      </div>

      <!--:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="pagination" :loading="loading"
               @change="handleTableChange"
      >

        <template slot="name" slot-scope="text,record">
          <a href="javascript:;">{{text}}</a>
        </template>

        <template slot="tag" slot-scope="text,record">
          <a-tag color="blue" v-for="item in text">{{item}}</a-tag>
        </template>

        <template slot="status" slot-scope="text,record">
          {{ text === 0 ? '禁用':'正常'}}
        </template>



        <span slot="permissions" slot-scope="text, record">
        <template>
          <a  href="javascript:;" @click="handlePermissions( record.id ,record)">配置权限</a>
        </template>
      </span>

        <span slot="action" slot-scope="text, record">
        <template>
          <a v-if="isAuth('sys:role:update')" href="javascript:;" @click="addOrUpdateHandle( record.id ,record)">修改</a>
          <a-divider type="vertical"/>
          <a v-if="isAuth('sys:role:delete')" href="javascript:;" @click="handleDelete(record)">删除</a>
        </template>
      </span>

      </a-table>


      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getTableData"></add-or-update>

      <role-permissions  v-if="permVisible" ref="rolePermissions" @refreshDataList="getTableData"></role-permissions>

    </a-card>


  </div>
</template>

<script>
  import AddOrUpdate from './role-add-or-update'
  import RolePermissions from './role-permissions'
  import {getRoleList} from '@/api/system/role'
  const align = 'center'
  const columns = [
    {
      title: '序号',
      dataIndex: '',
      width: 80,
      align,
      customRender: (text, record, index) => {
        return index + 1
      }
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      width: 150,
    },

    {
      title: '备注',
      dataIndex: 'description',
      align
    },
    {
      title: '权限',
      dataIndex: 'permissions',
      width: 150,
      scopedSlots: {customRender: 'permissions'}
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      align,
      scopedSlots: {customRender: 'action'}
    }
  ]
  export default {

    components: {AddOrUpdate , RolePermissions},
    data() {
      return {

        MenuTreeValue : ['0'] ,
        /*   -------搜索框--------*/
        searchParams: {
          name: ''
        },
        addOrUpdateVisible: false,
        permVisible: false,

        /*   -------表格--------*/

        loading: false,
        columns,
        data: [],
        selectedRowKeys: [], // Check here to configure the default column
        pagination: this.$defaultSettings.pagination ,

      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    mounted() {
      this.getTableData()
    },
    methods: {

      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },


      handleTableChange(pagination, filters, sorter) {
        this.pagination = pagination
        let sortOrder = ''
        let sortField = sorter.field ? sorter.field : ''
        if (sorter.order) {
          sortOrder = sortOrder === 'ascend' ? 'asc' : 'desc'
        }

        // 请求地址
        this.getTableData(sortField, sortOrder)

      },

      getTableData(sortField, sortOrder) {
        const parameter = {
          _search: true,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          sortField: sortField || '',
          sortOrder: sortOrder || '',
          data: this.searchParams
        };
        getRoleList(parameter).then(res => {
          this.loading = false;
          if (res.code === 200) {
            this.data = res.data.records;
            this.pagination.total = res.data.total
          }
        }).catch(err => {
          this.loading = false
        })

      },
      handleSearch() {
        this.pagination.current = 1
        this.getTableData();
      },

      setDefaults() {
        this.mdl.formData = {name: '', dept: '', job: '', email: '', tel: '', role: "", status: ''}
      },


      // 新增 / 修改
      addOrUpdateHandle(id , row) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id , row)
        })
      },

      handlePermissions(id , row){
        this.permVisible = true
        this.$nextTick(() => {
          this.$refs.rolePermissions.init(id , row)
        })
      },


      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].clearValidate()
        // })
      },
      createData() {
        this.upShow(1,"添加数据")
        this.mdl.visible = false
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行", row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].clearValidate()
        // })
      },

      updateData() {
        this.upShow(2,"修改数据")
        this.mdl.visible = false
      },

      handleDelete(row) {
        this.$axios
          .post(`${this.$URLMAP.url.role.delete}/${row.id}`, {id : row.id})
          .then((response) => {
            if (response.code === 200) {
              this.upShow(1, '角色删除成功')
            } else {
              this.upShow(2, res.msg || '角色删除失败')
            }
          }).catch(err => {
          this.upShow(2, '删除角色接口调用失败')
        })
      },

    }
  }
</script>

<style scoped>

</style>